<script setup lang="ts">
import CustomNavbar from './components/CustomNavbar.vue';
import CategoryPanel from './components/CategoryPanel.vue';
import HotPanel from './components/HotPanel.vue';
import HomeSteleton from './components/HomeSteleton.vue';
import { ref } from 'vue';
import type { BannerItem, CategoryItem, GuessItem, HotItem } from '@/types/home';
import { getHomeBannerAPI, getHomeCategoryAPI, getHomeHotAPI } from '@/apis/home';
import { onLoad } from '@dcloudio/uni-app';
import { useGuessList } from '@/composables';
const BannerList = ref<BannerItem[]>([])
const CategoryList = ref<CategoryItem[]>([])
const HotList = ref<HotItem[]>([])
//获取首页轮播图数据
const getHomeBanner = async () => {
    const res = await getHomeBannerAPI()
    // console.log(res.result);
    BannerList.value = res.result
}
//获取首页-前台分类-小程序
const getHomeCategory = async () => {
    const res = await getHomeCategoryAPI()
    // console.log(res, 888888);
    CategoryList.value = res.result
}

//首页-热门推荐-小程序
const getHomeHot = async () => {
    const res = await getHomeHotAPI()
    // console.log(res, 1111111);
    HotList.value = res.result
}

//猜你喜欢
const { guessRef: xtxguess,
    onScrollToLower } = useGuessList()
// 下拉刷新 获取轮播数据 和 猜你喜欢 首页分类 热门推荐
const isTriggered = ref(false)
const onRefreshContent = async () => {
    isTriggered.value = true
    // await getHomeBanner()
    // await getHomeCategory()
    // await getHomeHot()
    // xtxguess.value?.getMore()
    // 由于刷新时刷新，需要等待所有数据都请求完毕，再刷新，会使体验感不好 使用Promise.all可以优化
    await Promise.all([getHomeBanner(), getHomeCategory(), getHomeHot(), xtxguess.value?.getMore()])
    isTriggered.value = false
}
const isShow = ref(false)
onLoad(async () => {
    isShow.value = true
    // getHomeBanner()
    // getHomeCategory()
    // getHomeHot()
    await Promise.all([getHomeBanner(), getHomeCategory(), getHomeHot()])
    isShow.value = false
})


</script>

<template>
    <!-- 自定义导航栏 -->
    <!-- refresher-enabled -->
    <CustomNavbar></CustomNavbar>
    <scroll-view class="scorllview" scroll-y @scrolltolower="onScrollToLower" refresher-enabled
        @refresherrefresh="onRefreshContent" :refresher-triggered="isTriggered">
        <!-- 插入骨架屏 -->
        <HomeSteleton v-if="isShow"></HomeSteleton>
        <template v-else>
            <!-- 轮播图 -->
            <XtxSwiper :list="BannerList" />
            <!-- 首页分类 -->
            <CategoryPanel :list="CategoryList"></CategoryPanel>
            <!-- 热门推荐 -->
            <HotPanel :list="HotList"></HotPanel>
            <!-- 猜你喜欢 -->
            <XtxGuess ref="xtxguess"></XtxGuess>
        </template>
    </scroll-view>
</template>

<style lang="scss">
page {
    background-color: #F7F7F7;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.scorllview {
    flex: 1;
    overflow: hidden;
}
</style>
